<template>
    <footer>
        <div class="footer-section d-phone-none"></div>
        <div class="footer-section">text</div>

        <div class="footer-section d-phone-none">
            <p>
                背景绘图:
                <!--<span>
						<a
							href="https://www.deviantart.com/m00ncactus/art/Temple-Guardian-906490422">
							Temple Guardian
						</a> by
						<a href="https://www.deviantart.com/m00ncactus">
							m00ncactus
						</a>
					</span><br>-->
                <span>
                    <a href="https://pixiv.net/artworks/106165177">湖(AI)</a>
                    by
                    <a href="https://www.pixiv.net/users/85643940">ペンたろう</a>
                </span>
                <br />
                <span>
                    <a href="https://www.deviantart.com/m00ncactus/art/Temple-Guardian-906490422">
                        Waiting(AI)
                    </a>
                    by
                    <a href="https://www.pixiv.net/users/11065404">Uomi</a>
                </span>
                <br />
                <span>
                    <a href="https://www.deviantart.com/m00ncactus/art/Temple-Guardian-906490422">
                        Phase Gazing(AI)
                    </a>
                    by
                    <a href="https://www.pixiv.net/users/11065404">Uomi</a>
                </span>
            </p>
        </div>
    </footer>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
footer {
    //position: absolute;
    //left: 0;
    //top: 100vh;
    height: 100px;
    width: 100%;
    background-color: #1f1f1f;
    color: #e0e0e0;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;

    p {
        margin: 0;

        a,
        span {
            color: rgb(20, 100, 150);
        }
    }

    .footer-section {
        &:nth-child(1) {
            position: absolute;
            left: 0;
            text-align: left;
        }

        &:nth-child(2) {
            text-align: center;
        }

        &:nth-child(3) {
            position: absolute;
            right: 0;
            text-align: right;
        }
    }
}
</style>
